<template>
	<view class="empire-keywords box-padding__lr">
		<scroll-view class="empire-keywords__content" :scroll-x="true" :show-scrollbar="false">
			<text>热门搜索：</text>
			<text
				class="box-mg__right search-words"
				v-for="(text, key) in keywords"
				:key="key"
				@click="handleAddSearchText(text)"
			>
				{{ text }}
			</text>
		</scroll-view>
		<view class="empire-keywords__dropdown">
			<uni-transition ref="uniAni" :show="true" @click="handleToggleCollapse">
				<uni-icons type="down" size="16" color="#6a6a6a"></uni-icons>
			</uni-transition>
		</view>
	</view>
</template>
<script setup>
import { ref, onMounted } from 'vue';
defineProps({
	keywords: {
		type: Array,
		default: []
	}
});
const emits = defineEmits(['open', 'change']);
const uniAni = ref();
const collapsed = ref(false);

onMounted(() => {
	uniAni.value.init();
});

function handleToggleCollapse() {
	uniAni.value.step({ rotate: '180' }, { duration: 300 });
	uniAni.value.run(() => {
		collapsed.value = !collapsed.value;
		emits('open', collapsed.value);
	});
}

function handleAddSearchText(value) {
	emits('change', value);
}
</script>

<style lang="scss" scoped>
.empire-keywords {
	display: flex;
	align-items: center;
	&__content {
		height: 56rpx;
		line-height: 56rpx;
		white-space: nowrap;
	}
	&__dropdown {
		position: absolute;
		display: flex;
		justify-content: center;
		align-items: center;
		right: 16rpx;
		width: 72rpx;
		height: 40rpx;
		background: #f5f5f5;
		box-shadow: -2px 0 0 0 #dcdcdc;
	}
}

.search-words {
	opacity: 0.8;
}
</style>
